<template>
  <div>
    <el-upload
      class="avatar-uploader"
      multiple
      :on-progress="handleFileUploadProgress"
      :headers="upload.headers"
      :action="upload.url"
      :show-file-list="false"
      :on-success="handleFileSuccess"
      :before-upload="beforecheckfile"
      :limit="4"
      name="file"
      accept="image/*"
    >
      <div
        class="img-box"
        v-for="(img, index) in addform.fileList"
        :key="index"
      >
        <div class="img-inner">
          <img :src="img.fileUrl" class="banner" @click.stop="imgbtn(img.fileUrl)" />
          <!-- <el-image 
            class="banner"
            :src="img.fileUrl" 
            :preview-src-list="srcList">
          </el-image> -->
        </div>
        <span
          class="close-btn"
          @click.stop="delfiledata(index)"
        ></span>
      </div>
      <!-- <i class="el-icon-upload banner-uploader-icon">
        <span>上传</span>
      </i> -->
      <div class="banner-uploader-icon" v-if="addform.fileList.length <4">
        <div class="img">
          <img src="@/assets/image/service/ico4.png" alt="">
        </div>
        <div class="el-upload__text">上传</div>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible2">
      <PublicImage :src="imageUrlde"></PublicImage>
    </el-dialog>
  </div>
</template>

<script>
// import { hostqt } from "@/utils/config.js";
import hostqt from "@/common/api/service.js";

export default {
  data() {
    return {
      addform: {
        fileList: [], //附件资料
        complaintfilelistvalidator: "",
        file: []
      },
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { 'X-Base-Token': localStorage.getItem("qtToken") },
        // 上传的地址
        url: hostqt + "/commerce/comment/uploadFile"
      },
      batchId: "",
      addformrules: {},
      dialogVisible: false,
      dialogImageUrl: "",
      srcList: [],
      imageUrlde: '', // 图片预览
      dialogVisible2: false, // 图片预览显示隐藏
    };
  },
  methods: {
    imgbtn(img){
      console.log('123')
      this.imageUrlde = img;
      this.dialogVisible2 = true
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //删除后
    removeFiles(response, fileList) {
      let data = fileList;
      this.addComloaintsFiles(data);
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.open = true;
      this.upload.isUploading = true;
    },
    //上传附件前限制大小 格式
    beforecheckfile(file) {
      console.log(2679, file,file.name);
      this.upload.open = true;
      this.upload.isUploading = true;
      let isfile = true;
      const isLt10M = file.size / 1024 / 1024 < 2;
      if (!isfile) {
        this.$message.error("上传文件格式不正确");
      } else if (!isLt10M) {
        isfile = false;
        this.$message.error("上传文件大小不能超过 2MB");
      }
      this.upload.open = false;
      this.upload.isUploading = false;
      return isfile;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      if (response.status == 200) {
        if(response.result){
          this.addform.file = response.result;
          let obj = {
            fileName: file.name,
            fileType: 1,
            fileUrl: response.result
          }
          console.log('file123',obj)
          this.getFileDataList(obj);
          this.addComloaintsFiles(fileList);
        }else{
          this.$message.error("上传文件失败")
        }
      } else {
        this.$alert(response.message, "上传文件", {});
      }
    },
    //诉求新增文件
    addComloaintsFiles(fileList) {
      if (fileList.length > 0) {
        this.addform.complaintfilelistvalidator = "yes";
      } else {
        this.addform.complaintfilelistvalidator = "";
      }
    },
    //删除文件
    async delfiledata(idx) {
      this.addform.fileList.splice(idx,1)
      // this.$message({
      //   message: "删除" + name + "成功",
      //   type: "success"
      // });
    },
    //获取附件列表
    async getFileDataList(id) {
      // console.log('id', id)
      this.addform.fileList.push(id)
      this.srcList.push(id.fileUrl)
      this.$emit("changeImgUp", this.addform.fileList);
    }
  }
};
</script>

<style scoped>
.avatar-uploader {
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.img-box {
  position: relative;
  height: 100px;
  width: 100px;
  float: left;
  border-radius: 4px;
  margin-right: 14px;
  margin-bottom: 14px;
}
.img-inner {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #f5f5f5;
}
.img-inner .banner {
  width: 100px;
  border-radius: 4px;
}
.close-btn {
  position: absolute;
  right: -7px;
  top: -9px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background: url("../../../assets/image/finance/close-img.png") no-repeat center;
}
.banner-uploader-icon {
  display: inline-block;
  font-size: 12px;
  width: 100px;
  height: 100px;
  /* line-height: 100px; */
  text-align: center;
  border: 1px dashed #f1f2f4;
  /* background: #f1f2f4; */
  border-radius: 2px;
  vertical-align: top;
}
.banner-uploader-icon .img{
    margin-top: 25px;
  }
.banner-uploader-icon .icon-img {
  font-size: 26px;
  margin-top: 20px;
}
.banner-uploader-icon .el-upload__text {
  line-height: 5px;
  font-size: 14px;
}
</style>
